@import "~./atlantic/zul/less/_header.less";

.resetTable() {
	table {
		border-spacing: 0;
		th, td {
			background-clip: padding-box;
		}
	}
}

.z-biglistbox {
	border: 1px solid @baseBorderColor;
	overflow: hidden;
	zoom: 1;
	&-outer {
		border: 1px solid @baseBorderColor;
		border-top-width: 0;
		border-left-width: 0;
		margin: 0 15px 15px 0;
		background: @baseBackground;
		position: relative;
	}
	&-faker th {
		font-size: 0;
		.size(45px, 0);
		border: 0;
		margin: 0;
		padding: 0;
		line-height: 0;
		overflow: hidden;
	}
	//head
	&-head-outer {
		overflow: hidden;
	}
	&-head {
		width: 100%;
		border: 0;
		overflow: hidden;
		float: left;
		.resetTable();
	}
	&-header {
		border: 1px solid @meshTitleBorderColor;
		border-top-width: 0;
		padding: 0;
		background: @meshTitleBackground;
		text-align: left;
		position: relative;
		overflow: hidden;
		cursor: default;
		white-space: nowrap;
		
		&-content {
			.fontStyle(@titleFontFamily, @meshTitleFontSize, @fontWeightSemiBold, @meshTitleColor);
			padding: @paddingSmall @paddingSize;
			line-height: @headerHeight - @paddingSmall * 2;
			overflow: hidden;
			white-space: nowrap;
		}
	}
	//body
	&-body-outer {
		overflow: hidden;
	}
	&-body {
		.resetTable();
		width: 100%;
		border-bottom: 1px solid @baseBorderColor;
		border-right: 1px solid @baseBorderColor;
		background: @baseBackground;
		position: relative;
		overflow: hidden;
		float: left;
		
		//body content
		td {
			.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
			border-top: 1px solid @baseBorderColor;
			padding: @paddingSmall - 1 @paddingSmall @paddingSmall;
			line-height: @buttonHeight - @paddingSmall * 2;
			overflow: hidden;
			cursor: pointer;
			white-space: nowrap;
		}
		tr:first-child td{
			border-top-width: 0;
			padding-top: @paddingSmall;
		}
	}
	&-row {
		&:hover td {
			color: @hoverColor;
			background: @hoverBackground;
		}
		&.z-biglistbox-selected {
			td {
				color: @selectedColor;
				border-color: @selectedBorderColor;
				background: @selectedBackground;
			}
			&:hover td {
				color: @selectedHoverColor;
				border-color: @selectedHoverBorderColor;
				background: @selectedHoverBackground;
			}
		}
	}
	//odd rows
	&-odd {
		background: @meshStripeBackground;
	}
	//sort
	&-sort {
		cursor: pointer;
	}
	&-sorticon {
		.iconFontStyle(@baseFontSize, @meshTitleColor);
		line-height: normal;
		position: absolute;
		top: 0;
		left: 50%;
	}
	
	//frozen
	&-head-shim,
	&-body-shim {
		width: 3px;
		height: 1px;
		overflow: hidden;
		float: left;
	}
	&-verticalbar-frozen {
		position: absolute;
		top: -3px;
		background: @biglistboxFrozenBackground;
		border: 1px solid @baseBorderColor;
		width: 3px;
		height: 100%;
	}
	&-verticalbar-tick {
		position: absolute;
		bottom: 1px;
		.encodeURL(background, '~./zkmax/img/big/vbar-tick.png', -0px -0px no-repeat);
		height: 16px;
		overflow: hidden;
		width: 8px;
		z-index: 20;
		cursor: w-resize;
	}
	//WScroll bar
	&-wscroll {
		// vertical
		&-vertical {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 15px;
			height: 100%;
			right: -16px;
			.z-biglistbox-wscroll-drag {
				height: 115px;
				width: 15px;
				overflow: hidden;
				.encodeURL(background, '~./zkmax/img/big/drag-v.png', no-repeat scroll 0 0 transparent);
				position: absolute;
				z-index: 15;
				cursor: pointer;
				.z-biglistbox-wscroll-home,
				.z-biglistbox-wscroll-up,
				.z-biglistbox-wscroll-down,
				.z-biglistbox-wscroll-end {
					position: absolute;
					width: 15px;
					height: 15px;
				}
				.z-biglistbox-wscroll-home {
					top: 0;
				}
				.z-biglistbox-wscroll-up {
					top: 15px;
				}
				.z-biglistbox-wscroll-down {
					bottom: 15px;
				}
				.z-biglistbox-wscroll-end {
					bottom: 0;
				}
			}
			.z-biglistbox-wscroll-pos {
				position: absolute;
				z-index: 10;
				width: 15px;
				height: 115px;
				left: 0;
				background: contrast(@baseBackground);
				.borderRadius(2px);
				top: 0;
				.opacity(0.25);
				visibility: visible;
			}
			.z-biglistbox-wscroll-endbar {
				.horGradient(#FFFFFF, #EEEEEE);
				border: 1px solid @baseBorderColor;
				height: 7px;
				overflow: hidden;
				position: absolute;
				width: 15px;
				z-index: 20;
				right: 0;
			}
		}
		// horizontal
		&-horizontal {
			position: absolute;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 15px;
			bottom: -16px;
			.z-biglistbox-wscroll-drag {
				height: 15px;
				width: 115px;
				overflow: hidden;
				.encodeURL(background, '~./zkmax/img/big/drag-h.png', no-repeat scroll 0 0 transparent);
				position: absolute;
				z-index: 15;
				cursor: pointer;
				.z-biglistbox-wscroll-home,
				.z-biglistbox-wscroll-up,
				.z-biglistbox-wscroll-down,
				.z-biglistbox-wscroll-end {
					position: absolute;
					width: 15px;
					height: 15px;
				}
				.z-biglistbox-wscroll-home {
					left: 0;
				}
				.z-biglistbox-wscroll-up {
					left: 15px;
				}
				.z-biglistbox-wscroll-down {
					right: 15px;
				}
				.z-biglistbox-wscroll-end {
					right: 0;
				}
			}
			.z-biglistbox-wscroll-pos {
				position: absolute;
				z-index: 10;
				width: 115px;
				height: 15px;
				top: 0;
				background: contrast(@baseBackground);
				.borderRadius(2px);
				left: 0;
				.opacity(0.25);
				visibility: visible;
			}
			.z-biglistbox-wscroll-endbar {
				.verGradient(#FFFFFF, #EEEEEE);
				border: 1px solid @baseBorderColor;
				height: 15px;
				overflow: hidden;
				position: absolute;
				width: 7px;
				z-index: 20;
				right: -12px;
			}
		}
	}
}
